<template>
  <sideMenu></sideMenu>
  <div class="gridBox">
    <div v-for="(item, index) in showMenu" :key="index">
      <!-- index < 4 show only 4 boxes -->
      <template v-if="item.show && index < 4">
      <div
        :class="index%2==0 ? 'menuChoiceCon op1 divAlignRight':'menuChoiceCon op2 divAlignLeft'"
        @click="item.routing()"
      >
        <div class="menuSVGBox">
          <img :src="item.icon" class="menuSVG" />
        </div>
        <div class="menuTitleBox">
          <span class="menuTitle">
            <span v-for="(item, index) in item.title.split('<br/>')" :key="index">
              {{ item }} <br>
            </span>
          </span>
        </div>
      </div>
    </template>

    </div>
  </div>
</template>

<script setup>
import sideMenu from "../components/SideMenuBar.vue";
import { useUserStore } from "src/stores/modules/userStore";
import { useRouter } from "vue-router";
import { useQuasar } from "quasar";

import scanqrcode from '../assets/icons/scanqrcode.svg'
import rfid from '../assets/icons/rfid.svg'
import searchreport from '../assets/icons/searchreport.svg'
import checklist from '../assets/icons/checklist.svg'
import logoutIcon from '../assets/icons/logout.svg'

import {ref, computed} from 'vue'

const $router = useRouter();
const userStore = useUserStore();
const $q = useQuasar();
let role = null
if (userStore.currentDept != null) {
  role = userStore.currentDept.roleGroup;
  console.log("role: ", role);
}

// Function: Route to menu subpages
const routeToSubpage = (page) => {
  // Pages: MS=批次扫描工单(交收) | ER=查询报表 | WOD=工单查询 | PWOL=打印标签 | UWOF=上傳工單流程圖
  console.log("clicked Page: ", page);
  page === "MS"
    ? $router.push("/massScan")
    : page === "ER"
    ? $router.push("/enquiryReport")
    : page === "WOD"
    ? $router.push("/WODetails")
    : page === "PWOL"
    ? $router.push("/printWOLabel")
    : page === "UWOF"
    ? $router.push("/uploadWOFlow")
    : console.log("this page does not exist!");
};

const menu = ref([
  {title:'批次扫描工单<br/>(交收)', icon: scanqrcode, routing:()=>routeToSubpage('MS'), show:userStore.currentPerm.menu_massscan_perm},
  {title:'打印标签', icon: rfid, routing:()=>routeToSubpage('PWOL'), show:userStore.currentPerm.menu_printlabel_perm},
  {title:'查询报表', icon:searchreport, routing:()=>routeToSubpage('ER'), show:true},
  {title:'工单查询', icon:checklist, routing:()=>routeToSubpage('WOD'), show:userStore.currentPerm.menu_orderview_perm},
  {title:'上传工单流程图', icon:searchreport, routing:()=>routeToSubpage('UWOF'), show:userStore.currentPerm.menu_updatert_perm},
  {title:'登出', icon:logoutIcon, routing:()=>logout(), show:true},
])

const showMenu = computed(()=>{
  return menu.value.filter(i=>i.show)
})

// Function: Logout
const logout = () => {
  return userStore.logout().then(() => {
    $router.push("/auth");
    $q.notify({
      type: "positive",
      textColor: "white",
      message: "登出成功!",
      timeout: 2000,
      position: "center",
    });
  });
};
</script>

<style lang="scss">
.gridBox {
  text-align: center;
  color: #5f51c0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 20px;
}
.op1 {
  background-color: rgba(255, 255, 255, 0.952);
  opacity: 95%;
}

.op2 {
  background-color: rgba(255, 255, 255, 0.425);
  opacity: 80%;
}

@media (max-width: 700px) {
  .menuChoiceCon {
    width: 90%;
    height: 95%;
    background-color: white;
    border-radius: 20px;
    padding: 5% 10% 5% 10%;
    margin-top: 2%;
    margin-bottom: 1%;
  }

  .divAlignRight {
    margin-left: auto;
    margin-right: 0.5rem;
  }
  .divAlignLeft {
    margin-left: 0.5rem;
    margin-right: auto;
  }

  .menuSVGBox {
    margin-top: 20px;
    .menuSVG {
      height: 5rem;
      color: #5f51c0;
    }
  }
  .menuTitleBox {
    margin-top: 10px;
    margin-bottom: 10px;
    .menuTitle {
      font-size: 1.1rem;
      font-weight: bold;
    }
  }
}

@media (min-width: 701px) {
  .menuChoiceCon {
    width: 50%;
    height: 95%;
    background-color: white;
    border-radius: 20px;
    padding: 10% 10% 10% 10%;
    margin-top: 1%;
    margin-bottom: 1%;
  }
  .divAlignRight {
    margin-left: auto;
    margin-right: 0.5rem;
  }
  .divAlignLeft {
    margin-left: 0.5rem;
    margin-right: auto;
  }

  .menuSVGBox {
    .menuSVG {
      height: 7rem;
      color: #5f51c0;
    }
  }

  .menuTitleBox {
    margin-top: 10px;
    margin-bottom: 10px;
    .menuTitle {
      font-size: 1.2rem;
      font-weight: bold;
    }
  }
}
</style>
